<template>
    <div>
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width:200px;height:500px;float:left">
         <span style="font-weight:600;font-size:18px">目录</span><br>
        <div>
         <el-tree
        ref="tree"
        node-key="id"
        :data="treeData"
        :props="props"
        :expand-on-click-node="false"
        highlight-current
        accordion
        ></el-tree>
    </div>
    </div>
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width:200px;height:500px;float:left">
        
         <span style="font-weight:600;font-size:18px">作业</span><br><br>
         <el-menu v-for="(work,index) in workInfor" :key="work.workInfor" :offset="index > 0 ? 0 : 0" >
              <el-submenu index="index">
                <template slot="title">
                    <span >{{work.parentName}}</span>
                </template>
             <el-menu-item index="1-1" @click="download(work.workUrl)" >{{work.parentName}}作业</el-menu-item>
             
             </el-submenu>
         </el-menu>

    </div>
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width:800px;height:500px;float:right;">
        <el-scrollbar>
              <el-header style="text-align:center">
              <el-menu router  class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="/tree/father" style="font-size:18px">添加父节点</el-menu-item>
                    <el-menu-item index="/tree/child" style="font-size:18px">添加子节点</el-menu-item>
                    <el-menu-item index="/tree/work"  style="font-size:18px">设置作业</el-menu-item>
              </el-menu>
              </el-header>
                  <el-main>
                      <router-view ></router-view>
                  </el-main>
        </el-scrollbar>
    </div>
    </div>
</template>

<script>
import {getCookie} from '@/libs/cookie'
import {select} from '@/api/modules/coursevideo'
import {selectwork} from '@/api/modules/work'

export default {
    
    data(){
        return{
        drawer: false,
        workInfor:[],
        treeData:[],
          data:[],
          treeData:[],
          props: {
                label: "name"
            },
        courseID:{
            id:''
        },
        }
    },
    async mounted(){
        let courseID = JSON.parse(getCookie("courseID") || '{}');
        this.courseID.id = courseID.courseID
        this.courseTree()
        this.courseWork()
    },
    methods:{
        
        courseTree(filter){
            filter = {
                ...filter,
                ...this.courseID,
            }
            select(filter).then(res => {
                this.data = res.data.videoInfor
                 this.treeData =  this.toTree(this.data, "id", "parent");
                 // console.log(this.treeData)
            })
        },
         courseWork(filter){
            filter = {
                ...filter,
                ...this.courseID,
            }
            selectwork(filter).then(res => {
                 this.workInfor = res.data.workInfor
                  //console.log(res.data.workInfor)
            })
        },
        
        
          //下载文件
            download(workUrl) {
                // upurl = this.client.signatureUrl(_this.filename);
                window.location.href = workUrl;
            },
            async ossUpload(filename, file) {
                let _this = this
                try {
                    let result = await _this.client.multipartUpload(filename, file, {
                        progress: async function (p, checkpoint) {
                            _this.checkpoint = checkpoint
                            _this.percentage = p * 100
                        },
                        checkpoint: _this.checkpoint
                    })
                    console.log(result)
                } catch (e) {
                    console.log(e)
                }
            },
        
        
        //转换成树状结构所需要的data格式
        toTree(objects, keyName, parentKeyName) {
 
            if (!keyName) {
            throw "keyName argument is required";
            }
            if (!parentKeyName) {
            throw "parentKeyName argument is required";
            }
 
            // 列表项字典 将数组变成以objectId分组的对象，类似于{Vvwkeujpo:{},Rohdsfdofj:{}}
            var map = {};
            objects.forEach(x => (map[x[keyName]] = Object.assign({}, x)));
           
            // 已添加到父项的键
            var pushed = {};
 
            // 遍历列表项，将子项添加到父项的 children 数组
            for (const key in map) {
            if (map.hasOwnProperty(key)) {// 这样就可以过滤掉原型链上的可枚举属性了
                const x = map[key];
                if (x && x[keyName] && x[parentKeyName]) {
                var parent = map[x[parentKeyName]];
                if (parent) {
                    if (!parent.children) {
                    parent.children = [];
                    }
                    parent.children.push(x);
                    pushed[x[keyName]] = true;
                }
                }
            }
            }
 
            // 排除已添加到父项的项得到树
            var tree = [];
            for (const key in map) {
            if (map.hasOwnProperty(key)) {
                const x = map[key];
                if (!pushed[x[keyName]]) {
                tree.push(x);
                }
            }
            }
            return tree;
        },
    }
}
</script>
<style lang="scss" scoped>
.el-tree {
  font-size: 13px;
  background: #fafafa; // #eee;
  padding: 5px;

}
</style>
 
